<template>
  <view class="mine-container">
    <!-- 自定义导航栏 -->
    <custom-navbar title="我的"></custom-navbar>
    
    <view class="tabs" style="margin-top: 90px;">
      <view class="tab-item" :class="{ active: activeTab === 'all' }" @click="activeTab = 'all'">
        <text>全部</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'inProgress' }" @click="activeTab = 'inProgress'">
        <text>进行中</text>
      </view>
      <view class="tab-item" :class="{ active: activeTab === 'completed' }" @click="activeTab = 'completed'">
        <text>已完成</text>
      </view>
    </view>
    
    <view class="record-list">
      <view class="record-item" v-for="(item, index) in recordList" :key="index">
        <view class="record-indicator" :style="{ backgroundColor: item.color }"></view>
        <view class="record-content">
          <view class="record-title">{{ item.stationName }}</view>
          <view class="record-details">
            <text>充电量: {{ item.amount }}度 | 费用: {{ item.fee }}</text>
          </view>
          <view class="record-time">
            <text>完成时间: {{ item.completionTime }}</text>
          </view>
        </view>
        <view class="record-status">
          <text>{{ item.status }}</text>
        </view>
      </view>
    </view>
    <!-- 导航按钮 -->
    <view class="navigation-buttons">
      <button class="nav-button" @click="goToChargingProgress">充电进度</button>
      <button class="nav-button" @click="navigateToPaymentOrder">支付订单</button>
      <button class="nav-button charge" @click="goToStartCharging">开始充电</button>
    </view>
    
    <tab-bar></tab-bar>
  </view>
</template>

<script>
import TabBar from '@/components/TabBar.vue'
import CustomNavbar from '@/components/CustomNavbar.vue'

export default {
  components: {
    TabBar,
    CustomNavbar
  },
  data() {
    return {
      currentTime: '13:30',
      activeTab: 'all',
      recordList: [
        {
          stationName: '科技园充电站',
          amount: '50度',
          fee: '¥90.00',
          completionTime: '今天 13:25',
          status: '已完成',
          color: '#1890ff'
        },
        {
          stationName: '湖畔充电站',
          amount: '60度',
          fee: '¥108.00',
          completionTime: '昨天 19:05',
          status: '已完成',
          color: '#ff7a45'
        },
        {
          stationName: '中央公园充电站',
          amount: '40度',
          fee: '¥72.00',
          completionTime: '3天前 14:30',
          status: '已完成',
          color: '#1890ff'
        }
      ]
    }
  },
  onLoad() {
    this.updateCurrentTime();
  },
  onShow() {
    // 触发TabBar更新
    uni.$emit('updateTabBar');
    
    // 额外设置当前TabBar路径
    try {
      uni.setStorageSync('currentTabPath', '/pages/mine/mine');
    } catch (e) {
      console.error('设置当前TabBar路径失败:', e);
    }
    
    // 可以在这里刷新页面数据
    this.updateCurrentTime();
  },
  methods: {
    updateCurrentTime() {
      const date = new Date();
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      this.currentTime = `${hours}:${minutes}`;
    },
    
    navigateToPaymentOrder() {
      uni.navigateTo({
        url: '/pages/paymentOrder/payment0rder'
      });
    },
    
    goToChargingProgress() {
      uni.navigateTo({
        url: '/pages/chargingProgress/chargingProgress',
        fail: (err) => {
          console.error('跳转失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    goToStartCharging() {
      // 跳转到开始充电页面
      uni.navigateTo({
        url: '/pages/start_charging/startCharging',
        fail: (err) => {
          console.error('跳转到开始充电页面失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss">
.mine-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    background-color: #1890ff;
    color: #fff;
    padding: 20rpx 0;
    text-align: center;
    font-size: 32rpx;
  }
  
  .tabs {
    display: flex;
    background-color: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 20rpx;
    
    .tab-item {
      flex: 1;
      text-align: center;
      padding: 15rpx 0;
      border-radius: 50rpx;
      font-size: 28rpx;
      
      &.active {
        background-color: #1890ff;
        color: #fff;
      }
    }
  }
  
  .record-list {
    flex: 1;
    padding: 0 30rpx;
    margin-bottom: 30rpx;
    overflow-y: auto;
    
    .record-item {
      display: flex;
      background-color: #fff;
      border-radius: 15rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      position: relative;
      
      .record-indicator {
        width: 8rpx;
        position: absolute;
        left: 0;
        top: 15rpx;
        bottom: 15rpx;
        border-top-left-radius: 8rpx;
        border-bottom-left-radius: 8rpx;
      }
      
      .record-content {
        flex: 1;
        padding-left: 20rpx;
        
        .record-title {
          font-size: 32rpx;
          font-weight: 500;
          margin-bottom: 20rpx;
        }
        
        .record-details, .record-time {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 10rpx;
        }
      }
      
      .record-status {
        color: #1890ff;
        font-size: 28rpx;
      }
    }
  }
  
  .navigation-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 30rpx;
    margin-bottom: 120rpx;
    position: relative;
    z-index: 10;
    
    .nav-button {
      background-color: #1890ff;
      color: #fff;
      padding: 20rpx 40rpx;
      border-radius: 10rpx;
      font-size: 28rpx;
      width: 80%;
      margin: 10rpx 0;
      
      &:active {
        opacity: 0.8;
      }
      
      &.bluetooth {
        background-color: #42a5f5;
      }
      
      &.charge {
        background-color: #ff6b35;
      }
    }
  }
}
</style> 